import 'package:flutter/material.dart';

import 'GridCanvas.dart';

//https://juejin.cn/post/7018050930419433479#heading-1
class CanvasExample extends StatefulWidget {
  CanvasExample({Key? key}) : super(key: key);

  @override
  _CanvasExampleState createState() => _CanvasExampleState();
}

class _CanvasExampleState extends State<CanvasExample> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Paper(),
        Container(
          color: Colors.transparent,
          alignment: Alignment.center,
          child: CustomPaint(
            // 使用CustomPaint 背景画板
            painter: MyPainter3(),
          ),
        )
      ],
    );
  }
}

class MyPainter3 extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path();
// 路径对象
    Paint paint = Paint() // 画笔对象
      ..color = Colors.orange // 颜色
      ..style = PaintingStyle.stroke // 线条
      ..strokeWidth = 2; // 线宽

// 给path设置由当前点（0，0）控制点（0，80）终点（100，100）三个点组成的二次贝塞尔曲线
    path.quadraticBezierTo(0, 80, 100, 100);
// 绘制
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 创建画笔
    final Paint paintLine = Paint()
      ..color = Colors.black
      ..strokeWidth = 3;
    // 绘制线
    canvas.drawLine(Offset(-100, 0), Offset(100, 0), paintLine);
    paintLine.color = Colors.green;
    canvas.drawLine(Offset(0, 100), Offset(0, -100), paintLine);
    // 创建画笔
    final Paint paintPoint = Paint()..color = Colors.red;
    // 绘制圆点
    canvas.drawCircle(Offset(0, 0), 10, paintPoint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class MyPainter2 extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;
    Path path = Path();
    // 路径移动至起点
    path.moveTo(0, -100);
    // 连接各个端点
    path.lineTo(59, 81);
    path.lineTo(-95, -31);
    path.lineTo(95, -31);
    path.lineTo(-59, 81);
    path.lineTo(0, -100);
    // 绘制路径
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class TextBian extends StatelessWidget {
  const TextBian({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: Directionality(
        textDirection: TextDirection.ltr,
        child: Stack(
          children: <Widget>[
            // 边框文字
            Text(
              'BillionBottle',
              style: TextStyle(
                fontSize: 100,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                // 通过Paint实现文字描边
                foreground: Paint()
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 6
                  ..color = Colors.blue,
              ),
            ),
            // 填充文字，两层绘制叠加，完成描边效果
            Text(
              'BillionBottle',
              style: TextStyle(
                fontSize: 100,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
